<template>
  <v-app>
    <v-navigation-drawer
      v-model="drawer"
      permanent
      :rail="rail"
      @click="rail = false"
    >
      <!-- <v-list-item
        nav
        prepend-avatar="https://randomuser.me/api/portraits/men/85.jpg"
        :title="user.username"
      /> -->

      <v-divider />

      <v-list density="compact" nav>
        <v-list-item
          v-for="item in menuItems"
          :key="item.title"
          :active="$route.path === item.to"
          :prepend-icon="item.icon"
          :title="item.title"
          :to="item.to"
        />
      </v-list>
    </v-navigation-drawer>

    <v-app-bar color="primary" density="compact" :flat="true">
      <template #prepend>
        <!-- <v-app-bar-nav-icon @click.stop="drawer = !drawer" /> -->
        <v-app-bar-nav-icon
          @click.stop="rail = !rail"
        />
      </template>

      <v-app-bar-title>Admin Dashboard</v-app-bar-title>

      <v-spacer />

      <v-menu>
        <template #activator="{ props }">
          <v-btn icon v-bind="props">
            <v-avatar size="32">
              <v-img alt="User" src="https://randomuser.me/api/portraits/men/85.jpg" />
            </v-avatar>
          </v-btn>
        </template>
        <v-list>
          <v-list-item
            v-for="(item, index) in userMenu"
            :key="index"
            :prepend-icon="item.icon"
            :title="item.title"
            @click="item.action"
          />
        </v-list>
      </v-menu>
    </v-app-bar>

    <v-main>
      <v-container class="page-wrapper" fluid>
        <router-view />
      </v-container>
    </v-main>
  </v-app>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'

  const router = useRouter()
  const drawer = ref(true)
  const rail = ref(false)

  const user = {
    username: 'Admin User',
    email: 'admin@example.com',
    avatar: 'https://randomuser.me/api/portraits/men/85.jpg',
  }

  const menuItems = [
    { title: 'Dashboard', icon: 'mdi-view-dashboard', to: '/' },
    { title: 'Users', icon: 'mdi-account-group', to: '/users' },
    { title: 'Products', icon: 'mdi-package-variant', to: '/products' },
    { title: 'Orders', icon: 'mdi-cart', to: '/orders' },
    { title: 'Settings', icon: 'mdi-cog', to: '/settings' },
  ]

  const userMenu = [
    { title: 'Profile', icon: 'mdi-account', action: () => router.push('/profile') },
    { title: 'Settings', icon: 'mdi-cog', action: () => router.push('/settings') },
    { title: 'Logout', icon: 'mdi-logout', action: () => console.log('Logout') },
  ]
</script>

<style scoped>
.page-wrapper {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
}
</style>
